<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form label-width="100px" size="mini" label-position="right" @submit.native.prevent>
      <el-row type="flex" justify="space-between">
        <el-form-item label="昵称">
          <el-input class="filter-item" v-model="formFilter.showName"
                    :clearable="true" placeholder="昵称" />
        </el-form-item>
        <div>
          <el-button type="primary" size="mini" @click="onLoadTableData">
            查询
          </el-button>
          <el-button type="primary" size="mini" @click="onSubmit" :disabled="!canCommit">
            选择审批人
          </el-button>
        </div>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-radio-group class="radio-table" v-model="selectUserId" style="width: 100%;">
          <el-table :data="this.tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" size="mini" height="410px"
            header-cell-class-name="table-header-gray"
            row-key="userId">
            <el-table-column v-if="this.multiple" header-align="center"
              :reserve-selection="multiple"
              align="center" type="selection" width="50px"
              :selectable="canSelect"
            />
            <el-table-column v-else label="" header-align="center" align="center" width="50px">
              <template slot-scope="scope">
                <el-radio :label="scope.row.userId"> </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="loginName" />
            <el-table-column label="昵称" prop="showName" />
            <el-table-column label="所属部门" prop="deptIdDictMap.name" />
            <el-table-column label="账号类型" prop="userTypeDictMap.name" />
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{formatDateByStatsType(scope.row.createTime, 'day')}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24">
            <el-row type="flex" justify="end" style="margin-top: 10px;">
              <el-pagination
                :total="this.userTable.length"
                :current-page="this.currentPage"
                :page-size="this.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, prev, pager, next, sizes"
                @current-change="currentChange"
                @size-change="handleSizeChange" >
              </el-pagination>
            </el-row>
          </el-col>
        </el-radio-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable-next-line */
import { findItemFromList } from '@/utils';
import { statsDateRangeMixin } from '@/core/mixins';

export default {
  name: 'TaskUserSelect',
  props: {
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 已经被使用的用户列表
    usedUserIdList: {
      type: Array
    },
    userTable: {
      type: Array,
      default: () => []
    }
  },
  mixins: [statsDateRangeMixin],
  data () {
    return {
      pageSize: 10,
      currentPage: 1,
      assignee: undefined,
      // 单选下选中的用户
      selectUserId: undefined,
      // 多选下选中的用户列表
      multiSelectUser: [],
      tableData: [],
      formFilter: {
        showName: ''
      }
    }
  },
  methods: {
    onLoadTableData () {
      if (this.formFilter.showName != null && this.formFilter.showName !== '') {
        this.tableData = this.userTable.filter((u) => u.showName.indexOf(this.formFilter.showName) > -1);
      } else {
        this.tableData = this.userTable
      }
    },
    currentChange (e) {
      this.currentPage = e;
    },
    handleSizeChange (val) {
      this.pageSize = val;
    },
    onCancel (isSuccess, data) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, data);
      }
    },
    onClear () {
      this.onCancel(true);
    },
    canSelect (row) {
      if (Array.isArray(this.usedUserIdList) && this.usedUserIdList.length > 0) {
        return this.usedUserIdList.indexOf(row.loginName) === -1;
      } else {
        return true;
      }
    },
    onSubmit () {
      let selectUser = this.multiSelectUser;
      if (!this.multiple) {
        if (this.assignee != null && this.assignee !== '') {
          this.onCancel(true, {
            loginName: this.assignee
          });
          return;
        }
        selectUser = findItemFromList(this.userTable, this.selectUserId, 'userId');
      }
      this.onCancel(true, selectUser);
    },
    handleSelectionChange (values) {
      this.multiSelectUser = values;
    }
  },
  computed: {
    canCommit () {
      return this.multiple ? this.multiSelectUser.length > 0 : ((this.selectUserId != null && this.selectUserId !== '') || this.assignee != null);
    }
  },
  mounted () {
    this.tableData = this.userTable
  }
}
</script>

<style scoped>
  .radio-table >>> .el-radio__label {
    display: none;
  }
</style>
